<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动详情',
  },
}
</route>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx pb-60rpx">
      <!-- <view v-if="swiperList.length" class="mb-24rpx">
        <wd-swiper :list="swiperList" autoplay :indicator="{ type: 'dots-bar' }"></wd-swiper>
      </view> -->
      <view
        v-if="detailData.coverUrl"
        class="mb-24rpx"
      >
        <wd-img
          custom-class="w-full h-400rpx"
          round
          radius="16rpx"
          :src="detailData.coverUrl"
          :preview-src="detailData.coverUrl"
          enable-preview
          mode="aspectFill"
        />
      </view>
      <ActivityBaseInfo
        :name="detailData.name"
        :descList="infoDescList"
        :phone="detailData.contactPhone"
        labelWidth="250rpx"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        title="活动介绍"
        :content="detailData.note"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        v-if="imageList.length"
        title="现场媒资"
      >
        <wd-img
          v-for="item in imageList"
          :key="item"
          custom-class="mr-16rpx mb-16rpx"
          round
          radius="8rpx"
          :width="100"
          :height="100"
          :src="item"
          :preview-src="item"
          enable-preview
        />
      </ContentBox>
    </view>
    <button
      class="common-share-btn"
      open-type="share"
    >
      <!-- <wd-icon name="share" size="18px"></wd-icon> -->
      <image
        class="share-icon"
        src="@/static/icons/share.svg"
      ></image>
      分享好友
    </button>
  </view>
</template>

<script setup>
import ActivityBaseInfo from '@/components/ActivityBaseInfo.vue'
import ContentBox from '@/components/ContentBox.vue'
import LtSwiper from '@/components/LtSwiper.vue'
import ActivityApi from '@/service/activity'
import { currRoute, uniNavigateTo, formatUrlString } from '@/utils/index'

const swiperList = ref([])

const detailData = ref({
  id: 0,
  name: '',
  date: '',
  address: '',
  note: '',
})
const getDetail = async (id) => {
  const { code, result } = await ActivityApi.getActivityDetail(id)
  if (code === 200 && result) {
    swiperList.value = formatUrlString(result.coverUrl, false)
    detailData.value = { ...result }
  }
}

const infoDescList = computed(() => {
  const {
    actualDuration,
    actualPayerNumber,
    address,
    date,
    expectFee,
    expectPayerNumber,
    safeNote,
  } = detailData.value
  return [
    { label: '活动礼堂', value: detailData.value.hallId_dictText },
    { label: '地址', value: address },
    { label: '镇(街)', value: detailData.value.sysOrgCode_dictText },
    { label: '活动日期', value: date },
    { label: '活动类型', value: detailData.value.sysOrgCode_dictText },
    { label: '预计参与人数', value: expectPayerNumber },
    { label: '预计费用', value: expectFee },
    { label: '实际活动时长(小时)', value: actualDuration },
    { label: '实际参与人数', value: actualPayerNumber },
    { label: '安全预案', value: safeNote },
  ]
})

const imageList = computed(() => {
  return detailData.value.liveUrl ? detailData.value.liveUrl.split(',') : []
})

onLoad((options) => {
  getDetail(options.id)
})

onShareAppMessage(() => {
  console.log('currRoute', currRoute())
  const { path, query } = currRoute()
  const sharePath = `${path}?id=${query.id}`
  return {
    title: detailData.value.name,
    path: sharePath,
  }
})
</script>

<style lang="scss" scoped>
.activity-detail {
  position: relative;
  height: 100vh;
}

.swiper-wrap {
  :deep() .wd-swiper {
    &__track {
      border-radius: 0;
    }
  }

  :deep() .home-banner {
    height: 400rpx;
    height: 56.25vw; // 16 / 9比例
  }
}

.media-img-wrapper {
  text-align: left;

  :deep() .media-img {
    margin-right: $uni-spacing-row-sm;
    margin-bottom: $uni-spacing-col-sm;
  }
}

// .detail-info {
//   position: relative;
//   padding: $uni-spacing-col-lg $uni-spacing-row-lg;

//   &-title {
//     width: 80%;
//     margin-bottom: $uni-spacing-col-lg;
//     font-size: $uni-font-size-title;
//     font-weight: 700;
//   }

//   &-item {
//     display: flex;
//     align-items: center;
//     margin-bottom: $uni-spacing-col-base;
//     font-weight: 600;

//     :deep() .wd-icon {
//       margin-right: $uni-spacing-row-sm;
//     }

//     .item-label {
//       margin-right: $uni-spacing-row-sm;
//     }

//     .item-value {
//       color: $uni-color-primary;
//     }
//   }

//   &-map {
//     position: absolute;
//     top: 50%;
//     right: 20px;
//     transform: translateY(-50%);
//   }
// }

// .detailData-desc {
//   padding: 0 $uni-spacing-row-lg;
//   font-size: $uni-font-size-base;
//   line-height: 1.5;
//   color: $uni-text-color-grey;
//   text-indent: 28px;
//   letter-spacing: 0.75px;
// }
</style>
